<template>
  <div class='login-view'>
    <div class='logo'>
      <img alt='logo' class='logo-image' src='@/assets/images/logo.png' /></div>
    <!-- 登录框 -->
    <div class='login-form'>
      <!-- 标题 -->
      <div class='login-form_title'>
        <span class='login-form_title-text'>{{ appName }}</span>
      </div>
      <!-- 商家账号 -->
      <div class='login-form_item'>
        <input v-model='userName' class='login-form_item-input' placeholder='请输入账号' type='text' />
      </div>
      <!-- 密码 -->
      <div class='login-form_item'>
        <input v-model='password' class='login-form_item-input' placeholder='请输入密码' type='password' />
      </div>
      <!-- 验证码-->
      <div class='login-form_item valid-code-input'>
        <input v-model='validCode' class='login-form_item-input' maxlength='6'
               placeholder='请输入验证码'
               type='text' />
        <div class='valid-code' @click='verificationCode'>
          <span class='valid-code-text'>{{ validCode }}</span>
        </div>
      </div>
      <div class='btn-login' @click='onLogin'>
        <span class='btn-login_text'>登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { useAccount } from '@/stores/account'

export default {
  name: 'LoginView',
  data() {
    return {
      // 应用名称
      appName: '快卜IEMS智慧能源管理系统',
      // 商家账号
      userName: 'admin',
      // 密码
      password: '12345678',
      // 验证码
      validCode: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.validCode = this.randomNum(100000, 999999)
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    verificationCode() {
      const code = this.validCode
      const username = this.userName
      const config = {
        method: 'get',
        url: 'http://123.56.247.120:8082/content/sysAdmin/verificationCode' + '?username=' + username + '&code=' + code
      }
      return new Promise((resolve, reject) => {
        axios(config)
          .then(function(response) {
            console.log(JSON.stringify(response.data))
            resolve(response.data)
          })
          .catch(function(error) {
            console.log(error)
            reject(error)
          })
      })
    },

    // 登录
    onLogin() {
      const self = this
      const config = {
        method: 'post',
        url: `http://123.56.247.120:8082/content/sysAdmin/loginPwd?username=${this.userName}&pwd=${this.password}&code=${this.validCode}`,
        headers: {
          'Content-Type': 'application/json'
        }
      }
      const validCode = this.verificationCode()
      Promise.all([validCode]).then(res => {
        console.log(res)
        axios(config)
          .then(function(response) {
            console.log(JSON.stringify(response.data))
            const store = useAccount()
            store.login(response.data.data)
            self.$router.push({ path: '/' })
          })
          .catch(function(error) {
            console.log(error)
          })
      })
    }
  }
}
</script>

<style lang='less' scoped>
.login-view {
  background-image: url(@/assets/images/login-bg.png);
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: relative;

  .logo {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-image {
      width: 183px;
      height: 45px;
    }
  }

  .login-form {
    transition: all .8s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    overflow: hidden;
    z-index: 1;
    width: 460px;
    padding-bottom: 40px;
    padding-top: 40px;
    background: #ffffff;
    opacity: .95;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .login-form_title {
      text-align: center;
      margin: 35px 0 30px;

      .login-form_title-text {
        color: #216ce6;
        font-size: 24px;
        font-weight: 700;
        font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
        text-align: center;
        letter-spacing: 1px;
        white-space: nowrap;
        transition: all .3s ease;
      }
    }

    .valid-code-input {

      width: 226px;
    }

    .login-form_item {
      display: flex;
      width: 336px;
      margin-bottom: 20px;
      position: relative;


      .login-form_item-input {
        flex: 1;
        height: 40px;
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        padding: 0 20px;
        font-size: 14px;
        color: #333;
        outline: none;
        transition: all .3s ease;

        &:focus {
          border-color: #216ce6;
        }
      }

      .valid-code {
        width: 100px;
        height: 40px;
        margin-left: 20px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all .3s ease;
        background-color: #216ce6;

        &:hover {
          background: #1a5bc8;
        }

        .valid-code-text {

          color: #fff;
          font-size: 16px;
          font-weight: 700;
          font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
          text-align: center;
          letter-spacing: 1px;
          white-space: nowrap;
          transition: all .3s ease;
        }
      }
    }

    .btn-login {
      width: 336px;
      height: 40px;
      margin-top: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      background: #216ce6;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all .3s ease;

      &:hover {
        background: #1a5bc8;
      }
    }
  }


}
</style>
